<template>
    <div>
    <canvas id = "canvas1"
    height="300" width="400" style="border: 2px solid #6f670e"></canvas>
    <el-button-group>
        <el-button type="primary" @click="schedule">关闭定时器</el-button>
    </el-button-group>
    </div>
</template>

<script>
/*    import * as d3 from 'd3';
    const datas =[99, 71, 78, 25, 36, 92];*/
    var a = null;
    export default {
        data: function () {
            return {}
        },
        computed: {},
        methods: {
            footman:function (x,y) {
                var frame = document.getElementById('canvas1');
                this.$message.success(frame.style.width+"==>"+frame.clientWidth)
                var g = frame.getContext('2d');
                g.fillStyle="#66eeb7";
                g.fillRect(0,0,frame.clientWidth,frame.clientHeight);
                g.fillStyle="#00FF00";
                g.fillRect(10,30,100,130);
                g.fillStyle="#0000FF";
                g.fillRect(200,200,100,500);
                g.fillStyle="#FF0000";
                g.moveTo(100,100);
                g.lineTo(300,300);
                g.stroke();
                g.fillStyle="#AABB00";
                g.beginPath();
                g.arc(frame.clientWidth/2,frame.clientHeight/2,20,0,Math.PI*2);
                g.arc(frame.clientWidth/2,frame.clientHeight/2,40,0,Math.PI*3/2);
                g.stroke();
                g.font="30px Arial";
                g.fillText("Hello Thanks",200,50);

            },
            schedule:function(){

                    var frame = document.getElementById('canvas1');
                    var graphics = frame.getContext('2d');
                    this.headman(graphics);
                    this.$message.warning(JSON.stringify(a));
                    if (a){
                        clearInterval(a);
                    }
            },
            headman:function (g) {
                g.fillStyle="#"+this.randomNumber(256).toString(16)+
                        this.randomNumber(256).toString(16)+
                        this.randomNumber(256).toString(16);
                g.fillRect(this.randomNumber(200),this.randomNumber(200)
                    ,this.randomNumber(400),this.randomNumber(300));
            },
            randomNumber:function (max) {
                return Math.floor(Math.random()*max)
            }

        },

        mounted: function () {
            this.footman();
            a =setInterval(()=>this.$message.warning(this.randomNumber(256)+' Ox'),4000);
          /*  const svg = d3.select(this.$el)
                .append('svg')
                .attr('width', 500)
                .attr('height', 270)
                .append('g')
                .attr('transform', 'translate(0, 10)');
            const x = d3.scaleLinear().range([0, 430]);
            const y = d3.scaleLinear().range([210, 0]);
            d3.axisLeft().scale(x);
            d3.axisTop().scale(y);
            x.domain(d3.extent(datas, (d, i) => i));
            y.domain([0, d3.max(datas, d => d)]);
            const createPath = d3.line()
                .x((d, i) => x(i))
                .y(d => y(d));
            svg.append('path').attr('d', createPath(datas));*/
        },

        created: function () {

        },
        destroyed:function(){
            if (a){
                clearInterval(a);
            }
        },
        name: "P2"
    }
</script>

